<template>
		<view class="components-header">
			<view class="occupy-section" :style="'height:'+statusBarH+'px'"></view>
			<view class="header-nav" :style="'padding-top:'+(statusBarH)+'px'" :class="change?'nav-bg':''">
				<image :src="change?'/static/icon/icon_back_black.png':'/static/icon/icon_back.png'" @click="back" />
				<text @click="toNav">{{ title }}</text>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			change: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				statusBarH: uni.getStorageSync('statusBarH'),
				headerHeight: 0
			}
		},
		mounted(){
			var view = uni.createSelectorQuery().select(".header-nav");
			view.boundingClientRect(data => {
				this.headerHeight = data.height;
				uni.setStorageSync('headerHeight', this.headerHeight)
			}).exec();
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			toNav(){
				uni.navigateTo({
						url: this.url
				})
			}
    },
		computed: {
			
		}
	}
</script>

<style lang="scss">
.occupy-section{
	width: 100vw;
}
.nav-bg{
	background-color: #fff;
	color: #000 !important;
}
.header-nav{
	z-index: 9999;
	width: 100vw;
	display: flex;
	align-items: center;
	padding: 0 30upx;
	position: fixed;
	top: 0;
	color: #fff;
	padding-bottom: 10upx;
	image{
		width: 54upx;
		height: 54upx;
	}
	text{
		flex: 1;
		text-align: center;
		margin-left: -54upx;
		font-size: 32upx;
		font-weight: bold;
	}
}
</style>
